<script setup>
import { ref, watch } from "vue";
import nightIcon from "@/common/nightIcon";
import dayIcon from "@/common/dayIcon";

const props = defineProps({
  weatherCode: {
    type: String,
    default: "00"
  },
  temperatureTime: {
    type: String,
    default: "12:00"
  }
});

// 天气类型
const WeatherType = {
  // 晴天
  SunnySky: "SunnySky",
  // 多云
  Cloudy: "Cloudy",
  // 阴天
  Overcast: "Overcast",
  // 雨天
  Rainy: "Rainy",
  // 晚上
  NightSky: "NightSky",
};
// 天气类型
const weatherType = ref(WeatherType.SunnySky);

/**
 * 设置天气类型
 */
const setWeatherType = () => {
  // 是否是晚上
  const hours = props.temperatureTime.substring(0, 2);
  if (Number(hours) > 20 || Number(hours) < 6) {
    weatherType.value = WeatherType.NightSky;
    return;
  }
	switch (props.weatherCode) {
    case "00":
        weatherType.value = WeatherType.SunnySky;
      break;
    case "01":
      weatherType.value = WeatherType.Cloudy;
      break;
    case "02":
    case "18":
    case "20":
    case "29":
    case "30":
    case "31":
    case "53":
      weatherType.value = WeatherType.Overcast;
      break;
    case "03":
    case "04":
    case "05":
    case "06":
    case "07":
    case "08":
    case "09":
    case "10":
    case "11":
    case "12":
    case "13":
    case "14":
    case "15":
    case "16":
    case "17":
    case "19":
    case "21":
    case "22":
    case "23":
    case "24":
    case "25":
    case "26":
    case "27":
    case "28":
    case "301":
    case "302":
      weatherType.value = WeatherType.Rainy;
      break;
    default:
      weatherType.value = WeatherType.SunnySky;
      break;
  }
};

// 监听天气变化
watch(() => props.weatherCode, () => {
  setWeatherType();
},{
  immediate: true
});
</script>

<template>
  <view v-if="weatherType === WeatherType.SunnySky" class="sunny-sky">
    <view class="sun"></view>
    <view class="sun-rays"></view>
  </view>
  <view v-if="weatherType === WeatherType.Cloudy" class="cloudy">
    <view v-for="item in 30" :key="item" class="cloud"></view>
  </view>
  <view v-if="weatherType === WeatherType.Overcast" class="overcast">
    <view v-for="item in 30" :key="item" class="cloud"></view>
  </view>
  <view v-if="weatherType === WeatherType.Rainy" class="rainy">
    <view v-for="item in 30" :key="item" class="cloud"></view>
    <view v-for="item in 100" :key="item" :class="'rain-' + item"></view>
  </view>
  <view v-if="weatherType === WeatherType.NightSky" class="night-sky">
    <view class="moon"></view>
    <view v-for="item in 200" :key="item" :class="'star-' + item"></view>
    <view v-for="item in 3" :key="item" :class="'shooting-star-' + item"></view>
  </view>
</template>